<!--
 * @Description: 相关数据
-->
<template>
    <div class="relation-data-comp">
        <ProcessTitle style="margin-bottom: 10px" :icon="'vp-xiangguanshuju'" :name="this.$i18n('collaboration.summary.processAssiant.label2.js')" v-if="showHeader" />
            <ul id="relation-data" class="relation-data" >
                <li v-for="item in columnList" :key="item.id">
                    <component
                        :is="getComponentName(item.dataTypeName)"
                        :baseInfo="baseInfo"
                        :data="item"
                        :params="createParams"
                        :isSummary="isSummary"
                    />
                </li>
            </ul>
    </div>
</template>
<script>
    import globalData from '@/plugins/data';
    import api from '@/api';
    // 引入基础数据
    import { useBaseInfoStore } from '@/store/modules/base-info';
    import { mapState } from 'pinia';
    // 我发起、收到的数据（当前模板）
    import MyData from './columns/my-data';
    import TableData from './columns/table-data';
    import ProcessTitle from "@/components/process-title";
    //外部数据
    import OutSystem from './columns/out-system'
    import IndexRelation from './columns/index-relation'
    // 报表数据 - 暂不支持
    import StatementData from './columns/statement-data'
    // 文档中心
    import DocCenter from './columns/doc-center'
    // 关联项目
    import Project from './columns/project'
    export default {
        name: 'RelationData',
        components: {
            ProcessTitle,
            MyData,
            TableData,
            OutSystem,
            IndexRelation,
            StatementData,
            DocCenter,
            Project
        },
        //是否是相关数据
        props: {
            isSummary: {
                type: Boolean,
                default:globalData.isSummary,
            },
            showHeader: {
                type: Boolean,
                default: false,
            },
            testValue:{
                type:Boolean,
                default: true,
            }
        },
        data() {
            return {
                //栏目列表
                columnList: [],
            };
        },
        computed: {
            ...mapState(useBaseInfoStore, ['baseInfo']),
            /**
             * @description: 组装生成接口请求所需参数
             * @return {String}接口请求所需参数字符串
             */
            createParams() {
                const { template, affair, workflow, summary, relatedProjectData } =
                    this.baseInfo.businessData;
                //新建或者待发事项是start ,处理节点的为activityId
                const{nodePolicy}=affair||{};
                let activityId=workflow.activityId;
                if (!globalData.isSummary || nodePolicy === 'newCol') {
                    activityId='start';
                }
                return {
                    templateId: template?.id, //模板id
                    activityId: activityId, //工作流节点id
                    dataRelationId: this.baseInfo.dataRelation.id, //相关数据id，基础信息接口dataRelation.id
                    // dataRelationId: null, //相关数据id，基础信息接口dataRelation.id
                    affairId: affair.id || '-1', //事项id
                    projectId: relatedProjectData?.projectId || summary?.projectId, //项目id，没有项目暂时不传,基础信息relatedProjectData.projectId
                    // projectId: null, //项目id，没有项目暂时不传,基础信息relatedProjectData.projectId
                    summaryId: summary.id, //事项id
                    processId: template?.templateProcessId||summary.processId, //模板流程id，基础信息中template.templateProcessId
                    affairState:affair?.state,
                };
            },
        },
        async created() {
            this.columnList = await api.relationDataGetColumn(this.createParams);
        },
        methods: {
            /**
             * @description: 根据接口返回字段dataTypeName，返回我们对应组件名称
             * @param {String}dataTypeName 接口返回每个栏目项的这个字段
             * @return {String}我们对应组件名称
             */
            getComponentName(dataTypeName) {
                switch (dataTypeName) {
                    //我发起的模板、我收到的模板，用同一个
                    case 'templateSend':
                    case 'templateDeal':
                    case 'selfColl':
                        return 'MyData';
                    //报表数据
                    case 'formSearch':
                      return 'TableData';
                    case 'formStat':
                        return 'StatementData'
                    // 文档中心
                    case 'doc':
                      return 'DocCenter'
                    case 'project':
                      return 'Project'
                    //外部系统
                    case 'outSystem':
                        return 'OutSystem';
                    case 'index':
                        return 'IndexRelation';
                }
            },
        },
    };
</script>
<style lang="scss" scoped>
.relation-data-comp {
    width: $right-panel-width + px;
    height: 100%;

  .relation-data {
    height: calc(100% - 40px);
    overflow-y: auto;
    > li {
        margin-bottom: 10px;
    }
  }
    .header-text {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 7px;

        i {
            font-size: 18px;
        }
    }

    ::v-deep .relation-data-title {
        display: flex;
        padding: 7px 20px 7px 12px;
        font-weight: 700;
        background-color: #F4F5F8;
        align-items: center;
        justify-content: space-between;

        .icon-font {
            font-size: 14px;
            color: var(--theme-brand6, $primary-color);
            cursor: pointer;
            margin-left: 5px;
        }

        > div {
            display: flex;
            align-items: center;
            flex: 1;

            &::before {
                width: 2px;
                height: 14px;
                margin-right: 8px;
                background-color: $primary-color;
                background-color: var(--theme-brand6, $primary-color);
                content: '';
            }

                > span {
                    margin-left: 5px;
                }
            }
        }

        > li {
            &:first-child ~ li {
                margin-top: 20px;
            }
        }
        
        ::v-deep .title-more {
            color: #666666;
            cursor: pointer;
            &:hover {
                color: var(--theme-brand6, #1F85EC);
            }
        }
    }
</style>
